
<template>
  <div class="user-item" :class="{'selected': selected}" @click="chooseClick">
    <div class="img-container">
      <img src="../../../assets/images/user-default-logo.svg" alt="">
    </div>
    <div class="text-container">
      <p class="top">
        <span class="name">{{ userInfo.accountName | emptyFilters }}</span>
        <span class="tel">{{userInfo.phone | emptyFilters }}</span>
      </p>
      <p>{{userInfo.dempName  | emptyFilters + userInfo.roleName | emptyFilters }}</p>
    </div>
    <i class="user-item-icon selected"> </i>
  </div>
</template>

<script>
  const defaultLogo = require("../../../assets/images/user-default-logo.svg")
  export default {
    name: "UserItem",
    props: {
      userInfo: {
        type: Object,
        default: () => {
          return {}
        }
      },
    },
    data() {
      return {
        selected: this.userInfo.selected || false
      }
    },
    mounted() {
     // console.log(this.userInfo.accountName + '----' + this.selected)
    },
    methods: {
      chooseClick () {
        this.selected = !this.selected;
        this.userInfo.selected = this.selected
        this.$emit('choose-click', this.userInfo)
      }
    },
    filters: {
      emptyFilters (val) { // 0 返回原值
        return val === undefined || val === null ? "无" : val
      }
    },
    watch: {
      userInfo: {
        handler (val) {
          this.selected = val.selected || false
          console.log(val.accountName + '----' + this.selected)
        },
        deep:true,
        immediate: true,
      }
    }

  }
</script>

<style scoped lang="less">
  .text-align-left {
    text-align: left;
  }
  .user-item {
    display: inline-block;
    width: 273px;
    height: 60px;
    margin: 5px 10px;
    padding: 8px 0 8px 8px;
    border-radius: 5px;
    &.selected {
      border: 1px solid #F87242;
      .user-item-icon {
        display: inline-block;
        width: 28px;
        height: 28px;
        background-image: url("../../../assets/images/selected.svg");
        float: right;
        position: relative;
        top: -33px;
        right: -1px;
      }
    }
    .img-container {
      display: inline-block;
      position: relative;
      top: -14px;
      margin: 0 5px;
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .text-container {
      display: inline-block;
      width: 200px;
      .top {
        width:  100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        .name {
          font-size: 16px;
          color: #000;
        }
      }
    }
  }
</style>
